<template>
    <div>
        <div class='class_ssk'>
            <input type='text' placeholder='搜索您主子需要的商品' confirm-type='搜索' />
            <img src='/static/images/class_ssk.svg' />
        </div>
        <div style='width: 750rpx;	height: 2rpx;background:#efefef;'></div>

        <div class='zones_one'>
            <div class='commodity_one'>
                <div class='commodity_one_left'>
                    <span style='font-size: 28rpx;color:#505050;margin-top: 32rpx;'>BROYAL CATFOOD</span>
                    <span style='font-size: 20rpx;color:#a6a6a6;'>ADUIT & PUPPY CATS</span>
                    <span style='font-size: 16rpx;color:#a6a6a6;'>
                        <span style=' font-size: 28rpx;color:#ff0000;font-weight: bold;'>138</span>
                    </span>
                </div>
                <div>
                    <img src='/static/images/index_pet5.png' />
                </div>
            </div>
            <div class='commodity_two'>
                <div class='commodity_two_left'>
                    <div style='display:flex;flex-direction: column;margin:35rpx 0 20rpx 35rpx;'>
                        <span style='font-size: 28rpx;color:#505050;'>新品推荐</span>
                        <span style='font-size: 20rpx;color:#a6a6a6;'>美卡全封闭猫厕所</span>
                    </div>
                    <img src='/static/images/index_pet6.png' />

                </div>
                <div class='commodity_two_right'>

                    <div style='display:flex;flex-direction: column;margin:35rpx 0 20rpx 35rpx;'>
                        <span style='font-size: 28rpx;color:#505050;'>猜你喜欢</span>
                        <span style='font-size: 20rpx;color:#a6a6a6;'>汪星人屯货季</span>
                    </div>
                    <img src='/static/images/index_pet7.png' />

                </div>

            </div>

        </div>

        <div class='wares'>
            <div class='wares_box' v-for='(good,index) in goodList' :key="index" @click='details'>
                <div class='wares_box_img'>
                    <img :src='good.cover' />
                </div>
                <div class='wares_box_text'>
                    <span class='name'>{{good.desc}}</span>
                    <span class='xiangxi'>{{good.desc2}}</span>
                    <span class='tolie1'>
                        <span class='tolie2'>{{good.price}}</span>
                    </span>
                </div>
                <div class='wares_box_gongne'>
                    <img src='/static/images/collect.png' />
                    <img src='/static/images/shop.png' />
                    <div class='wares_box_but'>立即购买</div>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
import { formatTime } from "@/utils/index";
import card from "@/components/card";

export default {
    components: {
        card
    },

    data() {
        return {
            goodList: [
                {
                    cover: "/static/images/wares_box1.jpg",
                    isbn: "9787535482051",
                    desc: "BROYAL CATFOOD",
                    desc2: "ADUIT & PUPPY CATS",
                    price: 139,
                    count: 1,
                    checked: false
                },
                {
                    cover: "/static/images/wares_box1.jpg",
                    isbn: "9787535482051",
                    desc: "BROYAL CATFOOD",
                    desc2: "ADUIT & PUPPY CATS",
                    price: 139,
                    count: 1,
                    checked: false
                },
                {
                    cover: "/static/images/wares_box1.jpg",
                    isbn: "9787535482051",
                    desc: "BROYAL CATFOOD",
                    desc2: "ADUIT & PUPPY CATS",
                    price: 139,
                    count: 1,
                    checked: false
                },
                {
                    cover: "/static/images/wares_box1.jpg",
                    isbn: "9787535482051",
                    desc: "BROYAL CATFOOD",
                    desc2: "ADUIT & PUPPY CATS",
                    price: 139,
                    count: 1,
                    checked: false
                }
            ]
        };
    },

    created() {
        const logs = wx.getStorageSync("logs") || [];
        this.logs = logs.map(log => formatTime(new Date(log)));
    },
    methods: {}
};
</script>

<style>
.class_ssk {
    display: flex;
    /* position: relative; */
    margin-bottom: 23rpx;
}

.class_ssk input {
    width: 690rpx;
    height: 68rpx;
    border-radius: 35rpx;
    font-size: 28rpx;
    background: #f9f9f9;
    margin-left: 30rpx;
    padding: 0 40rpx;
}

.class_ssk img {
    width: 48rpx;
    height: 48rpx;
    position: relative;
    right: 85rpx;
    top: 12rpx;
}

.zones_one {
    margin-top: 28rpx;
}

.commodity_one {
    width: 690rpx;
    height: 250rpx;
    background: #f7eff7;
    margin: 0 30rpx;
    border-radius: 20rpx;
    display: flex;
    margin-bottom: 13rpx;
}

.commodity_one_left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 120rpx;
    margin-left: 34rpx;
    margin-right: 148rpx;
}

.commodity_one img {
    width: 169rpx;
    height: 209rpx;
    margin-top: 20rpx;
}

.commodity_two {
    display: flex;
    margin-bottom: 55rpx;
}

.commodity_two_left {
    width: 340rpx;
    height: 250rpx;
    background: #edf7ec;
    margin-left: 30rpx;
    display: flex;
    flex-direction: column;
    margin-right: 10rpx;
}

.commodity_two_left img {
    width: 130rpx;
    height: 117rpx;
    margin-left: 85rpx;
}

.commodity_two_right {
    width: 340rpx;
    height: 250rpx;
    background: #fbf7ee;
    display: flex;
    flex-direction: column;
}

.commodity_two_right img {
    width: 224rpx;
    height: 141rpx;
    margin-left: 57rpx;
}

.wares {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-around;
}

.wares_box {
    width: 366rpx;
    height: 576rpx;
}

.wares_box_img img {
    width: 366rpx;
    height: 366rpx;
}

.wares_box_text {
    display: flex;
    flex-direction: column;
}

.wares_box_text .name {
    color: #505050;
    font-size: 26rpx;
}

.wares_box_text .xiangxi {
    color: #a6a6a6;
    font-size: 20rpx;
    margin: 4rpx 0;
}

.wares_box_text .tolie1 {
    color: #a6a6a6;
    font-size: 16rpx;
}

.wares_box_text .tolie2 {
    color: #f00;
    font-size: 28rpx;
    font-weight: bold;
    margin-left: 10rpx;
}

.wares_box_gongne {
    display: flex;
    justify-content: center;
    align-items: Center;
}

.wares_box_gongne img {
    width: 32rpx;
    height: 32rpx;
    margin-right: 50rpx;
}

.wares_box_but {
    width: 116rpx;
    height: 47rpx;
    color: #fff;
    background-color: #ff8d1a;
    font-size: 24rpx;
    text-align: center;
    line-height: 47rpx;
    /* margin-left: 50rpx; */
}
</style>
